@extends('layouts.back_stage')
@section('content')
    <style>
     ::-webkit-scrollbar {height: 8px;}
     [v-cloak] {display: none;}
     .shopBg{background:#fff;overflow: hidden;margin:10px 0 10px 0;}
     .input-item{width:250px;padding-right: 0;margin-right:10px;}
     .label{margin-left:30px;background-color:#fff}
     .tab_center{margin:10px 0 10px 0;}
     .tab_left{float:left;width:55%;background:#fff;overflow: hidden;padding:15px}
     .tab_right{float:right;width:44.5%;background:#fff;overflow: hidden;padding:15px}
    </style>
    <div class="container">
        <div style="padding:20px 20px 10px 0;overflow:hidden;"><h3 style="float:left;">配货信息</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="guanLi" v-cloak>
            
              <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin:10px 0;padding:9px 30px;background:#fff;" v-if="book==='a'">
                            <label>包码号：</label>
                            <el-input  class="input-item" ref="input" v-model="inputVal" disabled @keyup.enter.native="query" placeholder="请输入包码" size="small"  prefix-icon="el-icon-search" clearable></el-input>
                                <el-button type="primary" @click="input_blur" size="small" disabled >确定</el-button>
                                <el-button  type="primary" size="small" @click='complete' disabled>配货完成</el-button>
                            </div>
                         <div class="row" style="margin:10px 0;padding:9px 30px;background:#fff;" v-else>
                            <label>包码号：</label>
                            <el-input  class="input-item" ref="input" v-model="inputVal" @keyup.enter.native="query" placeholder="请输入包码" size="small"  prefix-icon="el-icon-search" clearable></el-input>
                                <el-button type="primary" @click="input_blur" size="small" >确定</el-button>
                                <el-button  type="primary" size="small" @click='complete'>配货完成</el-button>
                            </div>
                        </div>
                        <div class="shopBg">
                        <div class="row" style="margin:10px 0;padding:9px 30px;background:#fff;">
                            <label class="label">单据号：</label>
                             <span>@{{document}}</span>
                            
                             <label class="label">加工厂：</label>
                             <span>@{{company}}</span>
                         </div>
                     </div>
                    <div class="tab_center">
                      <div class="tab_left">
                       <template>
                            <el-table :data="tableData1" size="small" :resizable='false'   border @row-click="tabClick"  style="width: 100%">
                            <el-table-column  type="index" label="序号"  :resizable='false'align="center" width="50"> </el-table-column>
                            <el-table-column prop="packet_code" label="包码"  :resizable='false' align="center" > </el-table-column>
                            <el-table-column  prop="exists"  label="商品数" :resizable='false'  align="center"  width="60" ></el-table-column>
                            <el-table-column prop="scaner" label="扫描人" :resizable='false'  align="center" width="100" > </el-table-column>
                            <el-table-column prop="loged_at" align="center"  :resizable='false' label="扫描时间" width="170" > </el-table-column>
                            </el-table>
                            <div style="text-align:center">
                                <el-pagination background layout="prev, pager, next"  @current-change="handleCurrentChange" :total="total"> </el-pagination>
                            </div>
                        </template>
                    </div>
                      <div class="tab_right">
                      <template>
                            <el-table :data="tableData2" size="small" :resizable='false'  border style="width: 100%">
                                <el-table-column  prop="girard" label="款号" :resizable='false'  align="center"  width="120"> </el-table-column>
                                <el-table-column prop="color"  label="颜色" :resizable='false'  align="center"  width="90"></el-table-column>
                                <el-table-column prop="size" label="尺码"  :resizable='false'  align="center"  width="70"> </el-table-column>
                                <el-table-column prop="code" label="条码"  :resizable='false' align="center"> </el-table-column>
                            </el-table>
                        </template>
                      </div>
                    </div> 
              </div>
        </div>
        <!-- /主体-->
    </div>

    <script>
        const app=new Vue({
            el: '#guanLi',
            data:{
                tableData1: [],
                tableData2: [],
                company:'',
                document:'',
                inputVal:'',
                id:'',
                book:'',
                total:1,
                current_page:1,
            },
            created(){
                var text=window.location.href.split('scanpage/')[1]
                if(text.length>2){
                  var aa=text[text.length-1]
                }

                this.book=aa
                  var list=text.replace('/a','')
                  this.id=list
            },
            mounted(){
             this.postScan();
             this.$refs['input'].focus()
            },
            methods:{
               // 配货完成
             complete(){
                 let that=this
                 if(this.tableData1==''){
                        this.$notify.error({
                                title: '警告',
                                message: '请先进行配货',
                               
                                });
                            return false;
                    }
                $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'post',
                        url:'/distribute/deliver/match-confirm',
                        dataType:'json',
                        data:{
                            receipt:that.id
                        }
                        }).then(function(res){
                            if(res.result.success==true){
                            window.location.href='/distribute/deliver/indexpage';
                            ththatis.$message({
                                message: '恭喜你，配货完成',
                                type: 'success'
                                });
                            }else{
                                that.$notify.error({
                                        title: '提示',
                                        message:res.result.errorMsg,
                                    });
                             }
                        })
                },
                //监听回车键
                query(){
                    if(this.inputVal==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请输入查询的包码',
                        });
                        return false;
                    }
                    let that=this
                   opt=[]
                    list=[]
                    text={}
                        $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'post',
                            url:'/distribute/deliver/scan',
                            dataType:'json',
                            data:{
                                packet:this.inputVal,
                                receipt:that.id
                            }
                        }).then(function(res){
                           console.log(res)
                            if(res.result.success==true){
                                text={
                                    'packet_code':res.content.packet.code,
                                     'exists':res.content.packet.exists,
                                     'scaner':res.content.packet.scaner.split(',')[1],
                                    'loged_at':res.content.packet.loged_at,
                                     'goods':res.content.goods
                                 }
                                 for(var k in res.content.goods){
                                      list.push({
                                        'girard':res.content.goods[k].girard,
                                        'color':res.content.goods[k].color,
                                        'size':res.content.goods[k].size,
                                        'code':res.content.goods[k].code,
                                    })
                                 }
                            }else{
                                for(var e in res.result.errorMsg.packet){
                                    that.$notify.error({
                                    title: '提示',
                                    message: '包码号不能为空',
                                  });
                                }
                            }
                            opt.push(text)
                            that.tableData1=opt
                            that.postScan();
                            that.tableData2=list
                        })
                },
                //点击表1  显示表2 的内容
                tabClick(row, column, cell, event){
                  var tabShow=[]
                    for(var w in row.goods){
                          tabShow.push({
                            'girard':row.girard,
                            'color':row.color,
                            'size':row.goods[w].size,
                            'code':row.goods[w].code
                          })
                    }
                  this.tableData2=tabShow
                },
               // 点击页数
                handleCurrentChange(val){
                    this.current_page=val
                    this.postScan();
                },
             //进来时请求数据
                postScan(){
                    let that=this
                    start1=[]
                    start2=[]
                    $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'get',
                            url:'/distribute/deliver/init',
                            dataType:'json',
                            data:{
                                receipt:this.id,
                             current_page:this.current_page
                            }
                        }).then(function(res){
                           res.content.data.current_page=that.current_page
                            that.total=res.content.data.total;
                             that.company=res.content.info.factory;
                             that.document=res.content.info.order;
                             var aa=res.content.data.data;
                            if(aa!=''){
                                for(var e in res.content.data.data){
                                        start1.push({
                                            'packet_code':res.content.data.data[e].packet_code,
                                            'exists':res.content.data.data[e].exists,
                                            'color':res.content.data.data[e].color,
                                            'id':res.content.data.data[e].id,
                                            'girard':res.content.data.data[e].girard,
                                           'scaner':res.content.data.data[e].owner.split(',')[1],
                                            'loged_at':res.content.data.data[e].updated_at,
                                            'goods':res.content.data.data[e].goods
                                        })
                                 }
                                for(var k in start1[0].goods){
                                        start2.push({
                                            'girard':start1[0].girard,
                                            'color':start1[0].color,
                                            'size':start1[0].goods[k].size,
                                            'code':start1[0].goods[k].code
                                        })
                                }
                                if(that.tableData1==''){
                                    that.tableData2=start2
                                }
                                that.tableData1=start1
                            }
                        })
                },
             // input失去焦点时请求
                input_blur(){
                    let that=this
                   opt=[]
                    list=[]
                    text={}
                        $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'post',
                            url:'/distribute/deliver/scan',
                            dataType:'json',
                            data:{
                                packet:this.inputVal,
                                receipt:that.id
                            }
                        }).then(function(res){
                            if(res.result.success==true){
                                text={
                                    'packet_code':res.content.packet.code,
                                     'exists':res.content.packet.exists,
                                     'scaner':res.content.packet.scaner.split(',')[1],
                                    'loged_at':res.content.packet.loged_at,
                                     'goods':res.content.goods
                                 }
                                 for(var k in res.content.goods){
                                      list.push({
                                        'girard':res.content.goods[k].girard,
                                        'color':res.content.goods[k].color,
                                        'size':res.content.goods[k].size,
                                        'code':res.content.goods[k].code,
                                    })
                                 }
                                 opt.push(text)
                                that.tableData1=opt
                                that.postScan();
                                that.tableData2=list
                            }else{
                                  that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                         }
                     })
                },
            }
        });
    </script>
@endsection